<form [formGroup]="roleForm">
    <mat-form-field class="insert-full-width formNum">
        <input matInput type="number" formControlName="roleId" placeholder="ID" required>
    </mat-form-field>
    <mat-form-field class="insert-full-width">
        <input matInput type="text" formControlName="roleName" placeholder="角色名稱" required>
    </mat-form-field>
    <mat-form-field class="insert-full-width">
        <input matInput type="number" formControlName="sortNo" placeholder="排序" required>
    </mat-form-field>
    <mat-form-field class="insert-full-width formNum">
        <input matInput type="number" formControlName="accessScope" placeholder="存取" required>
    </mat-form-field>
    <mat-form-field class="insert-full-width">
        <input matInput #inputDes type="text" maxlength="20" formControlName="description" placeholder="描述">
        <mat-hint align="end">{{inputDes.value?.length || 0}}/20</mat-hint>
    </mat-form-field>
    <mat-form-field class="insert-full-width">
        <mat-select formControlName="parentRoleId" placeholder="隸屬角色">
            <mat-option *ngFor="let roleDetail of roleList" value="{{roleDetail.roleId}}">{{roleDetail.roleName}}</mat-option>
        </mat-select>
    </mat-form-field>
    <br>
    <mat-checkbox formControlName="rejectScope" [checked]="false">
    </mat-checkbox>退回 &nbsp;
    <mat-checkbox formControlName="approveScope" [checked]="false">
    </mat-checkbox>核准 &nbsp;
    <mat-checkbox formControlName="submitScope" [checked]="false">
    </mat-checkbox>送出 &nbsp;
    <mat-checkbox formControlName="passScope" [checked]="false">
    </mat-checkbox>上陳 &nbsp;
    <mat-checkbox formControlName="printScope" [checked]="false">
    </mat-checkbox>影印
</form>